<template>
	<view class="st-query-block" v-if="isShow">
		<view class="st-query-bar">
			<view class="title">游客问答</view>
			<view class="more" @click="toQuestion">
				<text class="num">{{productQuery.total}}</text>条问答
				<text class="iconfont">&#xe67f;</text>
			</view>
		</view>
		<view class="st-query-box">
			<!-- 数据列表 -->
			<view class="st-query-group" v-if="productQuery.total">
				<view v-for="(item,index) in productQuery.list" :key="index" class="item">
					<view class="ask">问</view>
					<view class="con">{{item.title}}</view>
				</view>
			</view>
			<!-- 无数据 -->
			<view v-else class="st-query-none">
				<view class="msg">本产品暂无问答内容！</view>
				<view class="btn" @click="toPlblish">去提问</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 游客问答
	 * @property {Number} productid 产品id
	 * @property {Number} typeid 模型id
	 */
	export default {
		name: 'stTouristQuery',
		props: {
			typeid: {
				type: [Number, String],
				default: ''
			},
			productid: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				isShow: false, // 问答模块是否显示，方便小程序审核
				productQuery: {
					total: 0
				}
			};
		},
		mounted() {
			this.getProductQuery()
			this.isShow = !!uni.getStorageSync('cfg_question_is_show')
		},
		methods: {

			// 获取问答
			async getProductQuery() {
				let params = {
					method: 'api/v2/question/question_list',
					questype: 0,
					type_id: this.typeid,
					article_id: this.productid,
					type: 2,
					pagesize: 4
				};
				let res = await this.$http(params)
				if (res.status) {
					this.productQuery = res.data
				} else {
					this.isShow = false
				}
			},
			
			// 前往问答发表页面
			toPlblish() {
				const {typeid, productid} = this
				uni.navigateTo({
					url: `/subPackages/question/add?comefrom=2&typeid=${typeid}&id=${productid}`
				})
			},
			
			// 前往问答列表页面
			toQuestion() {
				const {typeid, productid} = this
				uni.navigateTo({
					url: `/subPackages/question/list?comefrom=2&typeid=${typeid}&id=${productid}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.st-query-block {
		margin-bottom: $uni-spacing-col-md;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		.st-query-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			.title{
				display: flex;
				font-size: 34rpx;
				font-weight: bold;
			}
			.more{
				color: #666;
				font-size: 22rpx;
				.num{
					font-weight: normal;
				}
				.iconfont{
					display: inline-block;
					vertical-align: middle;
					margin: -4rpx 0 0;
					font-size: 28rpx;
					font-weight: normal;
				}
			}
		}
		.st-query-box {
			padding: 12rpx 24rpx 24rpx;
			.st-query-group{
				font-size: $uni-font-size-sm;
				.item {
					display: flex;
					padding: 8rpx 0;
					.ask {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
						font-size: 20rpx;
						background-color: $uni-text-color-price;
						color: $uni-text-color-inverse;
						border-radius: 6rpx;
					}
				}
			}
			.st-query-none{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				.msg{
					color: #9e9e9e;
				}
				.btn{
					color: #fff;
					padding: 12rpx 32rpx;
					border-radius: 200rpx;
					background: linear-gradient(to right, #5BE181, #11C586);
				}
			}
		}
		
		
		

		

		

		

		.con {
			flex: 1;
			width: 300rpx;
		}
	}
</style>